<style media="screen" lang="less">
.autocomplete-input {
  position: relative;

  input {
    border-radius: 0;
    /* padding: 21px 40px 20px 15px; */
    &:focus {
      border-color: #40C976;
    }
  }

  >.search-btn {
    position: absolute;
    right: 0;
    top: 0px;
    font-size: 16px;
    padding: 5px 12px;
  }

  >.options-list {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 100;
    border: 1px solid #ccc;
    background-color: #fff;
    li {
      cursor: pointer;
      padding: 15px;
      &.highlighted {
        background-color: #37ca73;
        color: #fff;
      }
      &:not(:last-child) {
        border-bottom: 1px solid #ccc;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .autocomplete-input {
    height: 100%;
    width: 100%;
    input, input:active, input:focus, input:hover {
      height: 100%;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      border-radius: 1.33vw;
      box-shadow: none;
      outline: none;
      padding: 0 0 0 22px;
      padding: 0 0 0 5.86vw;
      font-size: 16px;
      font-size: 4.26vw;
    }
    .search-btn, .search-btn:active, .search-btn:hover, .search-btn:focus {
      padding: 3px 5px 5px 5px;
      padding: 0.9vw 1.33vw 1.33vw;
      height: 100%;
      left: 0;
      right: inherit;
      border: 0 !important;
      background-color: transparent !important;
      color: #999999;
      span{
        line-height: 1.8 !important;
      }
    }
  }
}
</style>

<template>
  <div id="autocomplete-input" class="autocomplete-input">
    <input v-model="keyword" class="form-control" placeholder="搜索关键字" @input="onInput($event.target.value)" @keyup.esc="isOpen = false" @blur="isOpen = false" @keydown.down="moveDown" @keydown.up="moveUp" @keydown.enter="select">
    <button class="btn btn-primary search-btn" type="button" name="button" @click="doSearch">
      <span class="icon-home-search"></span>
    </button>
    <!--     v-show="isOpen"
     -->
    <ul v-show="isOpen" class="options-list">
      <li v-for="(option, index) in fOptions" :class="{
                'highlighted': index === highlightedPosition
              }" @mouseenter="highlightedPosition = index" @mousedown="select">
        <slot name="item" :title="option.title" :description="option.desc" :thumbnail="option.thumbnail"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
import Util from "../util.js"

export default {
  props: {
    options: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      isOpen: false,
      highlightedPosition: 0,
      keyword: '',
      fOptions: []
    }
  },
  watch: {
    'keyword': function () {
      let self = this;
      $.getJSON("/search/suggest?q=" + this.keyword, function (data) {
        self.fOptions = data;
      })
    }
  },
  methods: {
    onInput(value) {
      this.highlightedPosition = 0
      this.isOpen = !!value
    },
    moveDown() {
      if (!this.isOpen) {
        return
      }
      this.highlightedPosition =
        (this.highlightedPosition + 1) % this.fOptions.length
    },
    moveUp() {
      if (!this.isOpen) {
        return
      }
      this.highlightedPosition = this.highlightedPosition - 1 < 0 ? this.fOptions.length - 1 : this.highlightedPosition - 1
    },
    doSearch() {
      let keyword = this.keyword
      window.location.href = "/products?q=" + (keyword ? keyword : "")
    },
    select() {
      let selectedOption = this.fOptions[this.highlightedPosition]
      this.$emit('select', selectedOption)
      this.isOpen = false
      this.keyword = selectedOption.title
      window.location.href = "/products/" + selectedOption.id
    }
  },
  mounted() {
    this.keyword = Util.getUrlParameter("q")
  }
}
</script>
